<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>惊蛰的博客 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        @import url('/css/post-card.css');
        @import url('/css/main.css');
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400;1,600&family=Roboto+Slab:wght@700&display=swap');
    </style>
    <style>
        body {
            font-family: Montserrat, sans;
        }

        .page-footer {
            color: var(--text-p3);
        }

        .sitemap {
            display: flex;
            justify-content: space-between;
            margin: .5rem 0 2rem;
            display: grid;
            grid-gap: 1rem 1rem;
            grid-auto-flow: column dense;
        }

        .sitemap-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .sitemap-group>.fs14 {
            margin: .5rem 0;
        }

        .page-footer .sitemap .sitemap-group>a {
            margin: .2rem 0;
            color: var(--text-p3);
        }

        .page-footer .text p {
            margin: 4px 0;
            line-height: 1.2;
        }
    </style>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
    <script src="/js/index.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/jquery.scrollbar/0.2.9/jquery.scrollbar.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
    <div class="l_body">
    <div class="l_main list">
        
        
<div class="nav-wrap mobile-hidden">
    <nav class="sub post cap header1">
        <a  href="/">最近发布</a>
        <a 
            href="/wiki/">分类</a>
        <a 
            href="/notes/">标签</a>
        <a href="/bibi/">说说</a>

    </nav>
    <div class="post-body-title header2">
        
    </div>
</div>

<style>
    .sub2 {
        display: flex;
        flex-direction: column;
        position: absolute;
        z-index: 11;
        background:#ffff!important;
        border-radius: 5px;
    }

    .sub2 a{
        display: block;
        margin-left: 0px!important;
        border-radius: 5px;
        margin: 5px 0 3px 0!important;
    }
</style>


        <div>
            <div id="arc">
                
                
                    
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                        
                        
                      
                  

                  
                <div>
                    <span class="year">
                        2020
                    </span>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/dc82f923.html">
                            <time> 2020/12/3</time>
                            万恶的IEEE_754规范 ，直接让雪花算法全盘崩
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/ce6dc55c.html">
                            <time> 2020/11/30</time>
                            面试-简述基础中剩下的部分BIO，NIO，粘包/拆包，多路复用等
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/d5c66869.html">
                            <time> 2020/11/30</time>
                            面试-简论HTTP和HTTPS
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/a3495676.html">
                            <time> 2020/11/30</time>
                            面试-网络基础TCP和UDP的知识
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/af8e7622.html">
                            <time> 2020/11/30</time>
                            简论微前端的意义与发展
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/5bb1531e.html">
                            <time> 2020/11/24</time>
                            初学者进——前端女友帮助整理前端常用css样式（极其有用）
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/4620fd3b.html">
                            <time> 2020/11/24</time>
                            解决 sub_filter 不能替换 Gzip 过的内容
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/40b47303.html">
                            <time> 2020/11/10</time>
                            VUE中index.html什么时候加载的mainjs呢
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/46757a8a.html">
                            <time> 2020/8/28</time>
                            对电影《八佰》的一小点看法
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/3e538304.html">
                            <time> 2020/8/28</time>
                            推荐一个css抖动库
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/909c053f.html">
                            <time> 2020/8/21</time>
                            全站利用pjax无刷新展示
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/8785db2d.html">
                            <time> 2020/8/11</time>
                            Trilateration三边测量定位算法
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/efd33308.html">
                            <time> 2020/8/8</time>
                            滴滴开源：DoraemonKit来了，程序员的开发工具箱
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/1de2a4b5.html">
                            <time> 2020/8/7</time>
                            关于猫鼻支的防范和治疗
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/4d356f35.html">
                            <time> 2020/8/7</time>
                            整理一下关于jq队列和回调
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/946e2946.html">
                            <time> 2020/8/5</time>
                            一个谷歌新标签页
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/235c3e0.html">
                            <time> 2020/7/31</time>
                            实现一个大文件上传和断点续传
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/8f0c64.html">
                            <time> 2020/7/30</time>
                            如何将猫猫监控放在博客上
                        </a>
                    </div>
                    
                </div>
                
                <div>
                    <span class="year">
                        2021
                    </span>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/92164fa6.html">
                            <time> 2021/9/20</time>
                            OT算法的协同文档制作的底层基础架构记录
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/8a4a471e.html">
                            <time> 2021/9/5</time>
                            OT算法-前端锁的解决方案
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/116a586f.html">
                            <time> 2021/9/4</time>
                            OT算法-关于版本冲突相差过大的解决方案
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/77f27c02.html">
                            <time> 2021/9/3</time>
                            OT算法-transform代码解析
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/aa15ee11.html">
                            <time> 2021/8/30</time>
                            （JS隔离）的几种方案带来的思考和展望
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/b139e0de.html">
                            <time> 2021/8/2</time>
                            关于css隔离的几种方案带来的思考和展望
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/625de086.html">
                            <time> 2021/8/2</time>
                            ot算法两个字符串如何生成ot操作转换的工具
                        </a>
                    </div>
                    
                    <div class="timenode">
                        <a class="meta" href="/posts/3fd9ecb3.html">
                            <time> 2021/1/24</time>
                            Jenkins部署JAVA的全部教程，感受Jenkins的巨大魅力
                        </a>
                    </div>
                    
                </div>
                
            </div>
        </div>
        <div class="page-footer reveal fs12">
    <hr>
    <div class="sitemap">
        <div class="sitemap-group">
            <span class="fs14">博客</span>
            <a href="/">近期发布</a>
            <a href="/wiki/">分类</a>
            <a href="/notes/">标签</a>
            <a href="/archives/">归档</a>
        </div>
        <div class="sitemap-group">
            <span class="fs14">社交</span>
            <a target="_blank" rel="external nofollow noopener noreferrer" href="">GitHub</a>
            <a target="_blank" rel="external nofollow noopener noreferrer" href="">GitLab</a>
        </div>
        <div class="sitemap-group">
            <span class="fs14">更多</span>
            <a href="/about/">关于本站</a>
            <a href="/bibi/">哔哔</a>
            <a target="_blank" rel="external nofollow noopener noreferrer" href="https://image.jingzhe.xyz">图床</a>
        </div>
    </div>
    <div class="text">
        <p>本博客所有文章除特别声明外，均采用
            <a target="_blank" rel="external nofollow noopener noreferrer"
                href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
                CCBY-NC-SA 4.0
            </a>
            许可协议，转载请注明出处。
        </p>
    </div>
</div>
    </div>
    <aside class="l_right">
        
<header class="header">
    <div class="logo-wrap">
        <a class="avatar" href="/about/">
            <img class="avatar" src="" data-original="https://ae01.alicdn.com/kf/Ua26a9ebfe30847ff8d4d7d7c7647c61cH.jpg"></a>
        <a class="title" href="/">
            <div class="main">惊蛰</div>
            <div class="sub normal cap"></div>
            <div class="sub hover cap" style="opacity:0">jingzhe.xyz</div>
        </a>
    </div>
    <nav class="menu dis-select">
        <a class="nav-item " href="/">博客</a>
        <a class="nav-item " href="/archives/">归档</a>
        <a class="nav-item " href="/about/">关于</a>
    </nav>
</header>
<script>
    $(function () {
        // https://v1.hitokoto.cn/?c=f&encode=text&max_length=8
        $.ajax({
            url: "https://v1.hitokoto.cn/?c=f&encode=text&max_length=10&min_length=5&c=i",
            success: function (result) {
                $(".normal").html(result);
            }
        });

    })
</script>
<div class="widgets">
    <div class="widget-wrap" id="markdown">
    <div class="widget-header cap dis-select">
        <span class="name">网站公告</span>
    </div>
    <div class="widget-body fs14">
        <p>👋 感谢您的光临，这里是自留地</p>
    </div>
</div>
    
<div class="widget-wrap" id="recent">
    <div class="widget-header cap dis-select"><span class="name">最近更新</span></div>
    <div class="widget-body fs14">
        
        <div class="line"></div>
        <a class="more-item" href="posts/92164fa6.html">
            <div class="cap">
                <time>2021-10-20</time>
                <span></span></div>
            <span class="title">OT算法的协同文档制作的底层基础架构记录</span>
        </a>
        <div class="line"></div>
        
        <div class="line"></div>
        <a class="more-item" href="posts/8a4a471e.html">
            <div class="cap">
                <time>2021-10-21</time>
                <span></span></div>
            <span class="title">OT算法-前端锁的解决方案</span>
        </a>
        <div class="line"></div>
        
        <div class="line"></div>
        <a class="more-item" href="posts/116a586f.html">
            <div class="cap">
                <time>2021-10-21</time>
                <span></span></div>
            <span class="title">OT算法-关于版本冲突相差过大的解决方案</span>
        </a>
        <div class="line"></div>
        
    </div>
</div>

<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <ul class="links-of-blogroll-list">
    </ul>
</div>


    <div class="widget-wrap" id="webinfo">
    <div class="widget-header cap dis-select"><span class="name">网站信息</span></div>
    <div class="widget-body fs14">
        <div>
            <span class="title">文章总数：</span><span class="content">26篇</span>
        </div>
        <div>
            <span class="title">网站字数：</span><span class="content">32.5k字 </span>
        </div>
        <div>
            <span class="title">奶茶状态：</span><span class="content">离线</span>
        </div>
    </div>
</div>
    <footer class="footer dis-select">
    <div class="social-wrap">
        <a class="social" title="GitHub" href="https://github.com/xaoxuu" target="_blank"
            rel="external nofollow noopener noreferrer"><img class="lazy entered loaded"
                src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/08a41b181ce68.svg"
                data-src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/08a41b181ce68.svg"
                data-ll-status="loaded"></a><a class="social" title="Spotify"
            href="https://open.spotify.com/user/xaoxuu" target="_blank"
            rel="external nofollow noopener noreferrer"><img class="lazy entered loaded"
                src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/3845874.svg"
                data-src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/3845874.svg"
                data-ll-status="loaded"></a><a class="social" title="Unsplash"
            href="https://unsplash.com/@xaoxuu" target="_blank"
            rel="external nofollow noopener noreferrer"><img class="lazy entered loaded"
                src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/3616429.svg"
                data-src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/3616429.svg"
                data-ll-status="loaded"></a><a class="social" title="Comments" href="/about/#comments"
            rel="noopener noreferrer"><img class="lazy entered loaded"
                src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/942ebbf1a4b91.svg"
                data-src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/942ebbf1a4b91.svg"
                data-ll-status="loaded"></a></div>
</footer>
</div>
    </aside>
</div>

<style>
    div.timenode:before {
        top: 0px;
        height: 6px;
    }

    div.timenode:after {
        content: '';
        z-index: 1;
        position: absolute;
        background: rgba(68, 215, 182, 0.5);
        width: 2px;
        left: 7px;
    }

    #arc .timenode .meta {
        padding: 6px 0;
        line-height: 1.5;
        height: auto;
        max-width: 100%;
        display: flex;
        font-size: 0.9375rem;
        font-weight: 500;
        border-radius: 2px;
        color: var(--color-list);
    }

    div.timenode .meta {
        position: relative;
        color: var(--color-meta);
        font-size: 0.875rem;
        line-height: 32px;
        height: 32px;
    }

    #arc .timenode:after {
        margin-left: 12px;
    }

    div.timenode:before {
        top: 0px;
        height: 6px;
    }

    div.timenode {
        position: relative;
    }

    #arc .timenode .meta:after {
        margin-left: 14px;
    }

    div.timenode .meta:after {
        background: #44d7b6;
        margin-left: 2px;
        margin-top: 2px;
        width: 12px;
        height: 12px;
        border-radius: 6px;
        transform: scale(0.5);
        transition: all 0.28s ease;
        -moz-transition: all 0.28s ease;
        -webkit-transition: all 0.28s ease;
        -o-transition: all 0.28s ease;
    }

    div.timenode .meta:after {
        content: '';
        position: absolute;
        top: 8px;
        z-index: 2;
    }

    div.timenode .meta:hover::after{
        transform: scale(1);
    }

    div.timenode:hover{
        background: var(--card);
        border-radius: 6px;
    }

    #arc .timenode .meta time {
        color: var(--color-meta);
        margin-left: 34px;
        margin-right: 4px;
        flex-shrink: 0;
        width: 90px;
    }

    #arc .year{
        margin-top: 34px;
    }

    #arc,
    #cat,
    #tag {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    #arc {
        margin-bottom: 32px;
        padding-bottom: 64px;
    }

    #arc .timenode:before,
    #arc .timenode:after {
        margin-left: 12px;
    }

    #arc .timenode .meta {
        padding: 6px 0;
        line-height: 1.5;
        height: auto;
        max-width: 100%;
        display: flex;
        font-size: 0.9375rem;
        font-weight: 500;
        border-radius: 2px;
        color: var(--color-list);
    }

    #arc .timenode .meta:hover {
        color: var(--color-p);
        background: var(--color-site-bg);
    }

    #arc .timenode .meta i {
        line-height: 1.5;
        color: #ff5722;
    }

    #arc .timenode .meta i.red {
        color: #fe5f58;
    }

    #arc .timenode .meta i.green {
        color: #3dc550;
    }

    #arc .timenode .meta i.yellow {
        color: #ffbd2b;
    }

    #arc .timenode .meta i.blue {
        color: #1bcdfc;
    }

    #arc .timenode .meta i.theme {
        color: #44d7b6;
    }

    #arc .timenode .meta i.accent {
        color: #ff5722;
    }

    #arc .timenode .meta i.orange {
        color: #ff5722;
    }
</style>
    <div class="loading-div" id="loading" style="display: none;">
    <div class="loading">
        <svg id="stage" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet" stroke="#fff" stroke-width="3"
            stroke-linecap="round" fill="none"></svg>
        <span>加载中...</span>
    </div>
</div>
<style>
    .loading-div {
        position: absolute;
        display: flex;
        top: 0px;
        width: 100%;
        height: 100%;
        align-items: center;
        z-index: 20;
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    /*动画效果*/
    @keyframes fadeIn {
        from {
            backdrop-filter: blur(0px);
            background: rgba(0, 0, 0, 0);
        }

        to {
            backdrop-filter: blur(2px);
            background: rgb(0, 0, 0, 0.5);
        }
    }

    /*动画效果*/
    @keyframes fadeIn1 {
        from {
            filter: blur(1px);
        }

        to {
            filter: blur(0px);
        }
    }

    .loading {
        color: #fff;
        width: 250px;
        height: 250px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
        animation-name: fadeIn1;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    svg {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        /* background: #000; */
    }
</style>
<script src="https://lib.baomitu.com/gsap/3.7.1/gsap.min.js"></script>
<script>
    let pts = [],
        nPts = 12,
        lineLength = 60,
        timeScale = 0.5

    const radius = 180,
        tl = gsap.timeline()

    for (let i = 0; i < nPts; i++) { // plot points + add circles
        const c = document.createElementNS("http://www.w3.org/2000/svg", "circle"),
            angle = (i / nPts * Math.PI * 2) - Math.PI / 2,
            x = Math.cos(angle) * radius,
            y = Math.sin(angle) * radius

        pts.push(x.toFixed(2) + ',' + y.toFixed(2) + ' ')

        gsap.set(c, {
            x: 250,
            y: 250,
            scale: 0.8,
            attr: {
                class: 'c' + i,
                r: 3,
                cx: x,
                cy: y,
                fill: '#fff',
                stroke: 'none'
            }
        })

        stage.appendChild(c);
    }


    for (let i = 0; i <= nPts; i++) { // add paths + animate
        const p = document.createElementNS("http://www.w3.org/2000/svg", "path")

        gsap.set(p, {
            x: 250,
            y: 250,
            attr: {
                class: 'line' + i,
                d: 'M' + pts[i] + ' C' + gsap.utils.wrap(pts, [i + 2]) + ' ' + gsap.utils.wrap(pts, [i - 5]) +
                    ' ' + gsap.utils.wrap(pts, [i - 2]),
                // d:'M'+pts[i]+' c 0,0 '+gsap.utils.wrap(pts,[i-nPts/2])+' '+gsap.utils.wrap(pts,[i-3]),
                'stroke-dasharray': lineLength + ' ' + lineLength,
                'stroke-dashoffset': lineLength
            },
        });

        stage.appendChild(p);

        const lineTL = gsap.timeline({
                repeat: -1,
                defaults: {
                    duration: 0.4
                }
            })
            .to(p, {
                attr: {
                    'stroke-dashoffset': -lineLength
                },
                ease: 'expo.inOut',
                duration: 0.6
            }, 0.4)

        if (i < nPts) {
            lineTL.to('.c' + i, {
                scale: 1.2,
                ease: 'expo.inOut'
            }, 0.1)
            lineTL.to('.c' + i, {
                scale: 0.8,
                ease: 'expo.in'
            }, 0.5)
        }

        tl.add(lineTL, 1 - i / nPts);
    }

    tl.play(5).timeScale(timeScale)
</script>
<script>
    $(function () {
        // loadingShow()
    })

    function loadingShow() {
        $("#loading").show();
    }

    function loadingHide() {
        $("#loading").hide();
    }
</script>

    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery.scrollbar/0.2.9/jquery.scrollbar.min.js"></script> -->
    <script>
        // $(document).ready(function () {
        //     $('.l_body').scrollbar({
        //         barWidth: 10, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
        //         position: "x,y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
        //         wheelDis: 15 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
        //     });
        // });
    </script>
    <script>
        $('img').lazyload({
            threshold: 0,
            failure_limit: 0,
            event: "scroll", //触发事件
            effect: "show", //显示方式
            container: window, //容器
            data_attribute: "original", //属性
            skip_invisible: true,
            appear: null,
            load: null,
            placeholder: ""
        });
    </script>
<script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 3,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var e=n.imageLazyLoadSetting.isSPA,i=n.imageLazyLoadSetting.preloadRatio||1,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script></body>